<!-- 列表组件 -->
<template>
  <div class="list">
    <div class="product-list">
      <ul class="prolist">
        <li
          class="prolist-item"
          v-for="(categorylist, index) in moreData"
          @click="
            toDetail(categorylist.goods_id);
            listscroll();
          "
          :key="index"
        >
          <div class="pro-img">
            <div class="img-box">
              <img :src="categorylist.goods_thumb" class="img" />
              <img
                :src="categorylist.goods_label_suspension.formated_label_image"
              />
            </div>
          </div>
          <div class="pro-info">
            <h4
              v-if="categorylist.goods_name"
              v-text="categorylist.goods_name"
            ></h4>
            <h4 v-if="categorylist.title" v-text="categorylist.title"></h4>
            <div class="currency-price">
              <div class="currency-price-warp">
                <em>¥</em><span v-text="categorylist.shop_price"></span>
              </div>
            </div>
            <div class="outer outer_teshu">
              <em class="tag">自营</em>
              <div class="label-list"></div>
            </div>
            <div class="outer">
              <span>{{ categorylist.sale }}人已购买</span>
              <div class="add_cart">
                <i class="iconfont icon-gouwuche"></i>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="load" ref="load">
      <div class="loading">
        <mt-spinner
          type="fading-circle"
          color="#26a2ff"
          :size="30"
        ></mt-spinner>
        <span>玩命加载中...</span>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: { moreData: Array, loading: Boolean },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {
    hideload() {
      return this.$store.state.hideload;
    },
  },
  //监控data中的数据变化
  watch: {
    hideload() {
      this.$refs.load.innerText = "没有更多了";
    },
  },
  //方法集合
  methods: {
    toDetail(gid) {
      this.$router.push("/detail/" + gid);
    },
    listscroll() {
      document.documentElement.scrollTop = 0;
    },
  },
  mounted() {
    this.$store.dispatch("ActchangemoreData");
  },
};
</script>
<style lang="less">
em {
  font-style: normal;
}
.product-list {
  padding: 0.4rem 0.4rem 0;
  .prolist {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.6rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    .prolist-item {
      position: relative;
      overflow: hidden;
      float: left;
      width: 49%;
      padding: 0.6rem 0 0;
      border-radius: 0.5rem;
      margin-top: 0;
      &:nth-child(2n-1) {
        padding-right: 0.6rem;
      }
      .pro-img {
        height: auto;
        width: 100%;
        float: none;
        border: 0;
        background-color: #fff;
        border-radius: 0.5rem 0.5rem 0 0;
        overflow: hidden;
        .img-box {
          position: relative;
          display: block;
          padding-top: 100%;
          img {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
          img:not([src]) {
            opacity: 0;
          }
        }
      }
      .pro-info {
        position: relative;
        margin-left: 0;
        padding: 0.8rem;
        background-color: #fff;
        border-radius: 0 0 0.5rem 0.5rem;
        h4 {
          font-size: 1.2rem;
          height: 3.8rem;
          line-height: 1.9rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .currency-price {
          padding: 6px 0px 8px;
          .currency-price-warp {
            font-size: 16px;
            font-weight: 700;
            display: inline-block;
            color: rgb(242, 14, 40);
            em {
              font-size: 11.2px;
            }
          }
        }
        .outer {
          overflow: hidden;
          height: 2rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .add_cart {
            .icon-gouwuche {
              font-size: 1.4rem;
              color: #f92028;
            }
          }
          .tag {
            float: left;
            background-color: #f92028;
            color: #fff;
            font-size: 1rem;
            height: 1.6rem;
            line-height: 1.6rem;
            padding: 0 0.5rem;
            border-radius: 0.2rem;
          }
          .label-list {
            .label-img {
              height: 1.6rem;
              margin: 0 0 0 5px;
              float: left;
              img {
                height: 100%;
              }
            }
          }
          span {
            float: left;
            color: #999;
            font-size: 1.2rem;
          }
        }
        .outer_teshu {
          display: inline-block;
          height: 1.6rem;
          margin-bottom: 0.3rem;
          width: 100%;
        }
      }
    }
  }
}
.load {
  margin-bottom: 6rem;
  font-size: 1.4rem;
  color: #26a2ff;
  text-align: center;
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    img {
      width: 2.5rem;
    }
    span {
      font-size: 1.4rem;
      margin-left: 0.5rem;
      font-family: cursive;
      color: #26a2ff;
    }
  }
  .nomore {
    font-size: 1.2rem;
    margin-left: 0.5rem;
    font-family: cursive;
  }
}
</style>